<template>
    <div class="app-container">
        <div class="search-container">
            <el-form :model="props.patientInfo" ref="queryParamsRef" :inline="true" label-width="90px">
                <el-form-item label="患者信息:" prop="patientId">
                    <span class="fz15 ml5" style="color: #5050e1">
                        {{ props.patientInfo?.name }}<svg-icon style="margin-left: 10px" :icon-class="dictStore.getMateDictInfo(
                            dictDataMap['sys_user_sex'],
                            props.patientInfo?.sex
                        ).dictValue === '1'
                            ? 'man'
                            : 'woman'
                            "/></span>
                    <span class="fz13 ml10">{{ props.patientInfo?.age }} 岁{{ props.patientInfo?.ageMonth }} 月{{
                            props.patientInfo?.ageDay
                        }}天{{ props.patientInfo?.ageHours }}小时</span>
                </el-form-item>
                <el-form-item label="ID:" prop="patientId">
                    <span class="patient-info-span">{{ props.patientInfo?.patientId }}</span>
                </el-form-item>
                <el-form-item label="费别:">
                    <span class="patient-info-span">
                        {{
                            dictStore.getMateDictInfo(
                                dictDataMap["medical_insurance_type"],
                                props.patientInfo?.chargeType
                            )
                                ? dictStore.getMateDictInfo(
                                    dictDataMap["medical_insurance_type"],
                                    props.patientInfo?.chargeType
                                ).dictLabel
                                : ""
                        }}</span>
                </el-form-item>
                <el-form-item label="住院号:" prop="hospitalNo">
                    <span class="patient-info-span">{{ props.patientInfo?.hospitalNo }}</span>
                </el-form-item>
                <el-form-item label="身份证号:">
                    <span class="patient-info-span">{{ props.patientInfo?.idNo }}</span>
                </el-form-item>
                <el-form-item label="入院科室:">
                    <span class="patient-info-span">{{
                            props.patientInfo ? props.patientInfo.deptAdmissionToName : "--"
                        }}</span>
                </el-form-item>
                <el-form-item label="预交金总额:">
                    <span class="ys-css">{{ amountOfMoney }}</span>元
                </el-form-item>
                <el-form-item label="剩余预交金:">
                    <span class="ys-css">{{ residueAmountOfMoney }}</span>元
                </el-form-item>
                <el-row>
                    <el-col :span="21">
                        <el-form-item label="入院诊断:">
                            <span class="ys-css" style="color: #ff3333;">{{ diagnosis ? diagnosis : "--" }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <el-button style="float: right" class="mb5" type="primary"
                                   @click="listPatPrepaymentFun(patientInfo.visitId)">
                            <template #icon>
                                <i-ep-search/>
                            </template>
                            刷新
                        </el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <el-table v-adaptive="115" :border="true" :data="patPrepaymentList" :stripe="true" highlight-current-row
                  :header-cell-style="$headerCellStyle">
            <el-table-column label="状态" :align="'center'" prop="type" width="80">
                <template #default="scope">
                    <dict-data-tag :options="dictDataMap['pat_prepayment_type']" :value="scope.row.type"/>
                </template>
            </el-table-column>
            <el-table-column :align="'center'" label="收费号" prop="feesNo"/>
            <el-table-column label="支付方式" :align="'center'" prop="payWay" width="90">
                <template #default="scope">
                    <dict-data-tag :options="dictDataMap['pay_way_dict']" :value="scope.row.payWay"/>
                </template>
            </el-table-column>
            <el-table-column label="交款日期" :align="'center'" prop="feesNo" width="160">
                <template #default="scope">
                    {{ scope.row.createTime }}
                </template>
            </el-table-column>
            <el-table-column :align="'center'" label="收款员" prop="createByName" width="90"/>
            <el-table-column label="缴费金额(元)" :align="'center'" prop="amountOfMoney">
                <template #default="scope">
                    <span
                        :class="scope.row.type === '1' ? 'ys-css' : scope.row.type === '2' ? 'refunded-css' : 'cancel-css'">{{
                            parseFloat(scope.row.amountOfMoney).toFixed(2)
                        }}</span>
                </template>
            </el-table-column>
            <el-table-column label="当前余额(元)" :align="'center'" prop="currentBalance">
                <template #default="scope">
                    <span
                        :class="scope.row.type === '1' ? 'ys-css' : scope.row.type === '2' ? 'refunded-css' : 'cancel-css'">
                        {{ parseFloat(scope.row.currentBalance).toFixed(2) }}</span>
                </template>
            </el-table-column>
            <el-table-column :align="'center'" label="退款时间" prop="refundedTime" width="160"/>
            <el-table-column :align="'center'" label="退费号" prop="refundedId"/>
            <el-table-column :align="'center'" label="退费人" prop="refundedUserName"/>
            <el-table-column :align="'center'" label="支付卡号" prop="cardNo"/>
            <el-table-column :align="'center'" label="结账号" prop="acctNo"/>
            <el-table-column :align="'left'" class-name="small-padding fixed-width" fixed="left" label="操作"
                             width="150">
                <template #default="scope">
                    <el-tooltip class="item" content="打印" effect="dark" :placement="'top'">
                        <el-button circle type="primary" @click="printFun">
                            <template #icon>
                                <i-ep-printer/>
                            </template>
                        </el-button>
                    </el-tooltip>
                    <template v-if="!scope.row.acctNo && scope.row.type === '1'">
                        <template v-if="!scope.row.refundedId">
                            <el-tooltip class="item" content="退费" effect="dark" :placement="'top'">
                                <el-button type="warning" circle @click="refundApplicationFun(scope.row, '2')">
                                    <svg-icon icon-class="refundApplication"/>
                                </el-button>
                            </el-tooltip>
                            <el-tooltip class="item" content="作废" effect="dark" :placement="'top'">
                                <el-button type="danger" circle @click="refundApplicationFun(scope.row, '3')">
                                    <svg-icon icon-class="refundApplication"/>
                                </el-button>
                            </el-tooltip>
                        </template>
                    </template>
                </template>
            </el-table-column>
        </el-table>
        <div class="search-container">
            <el-form :model="form" :inline="true" label-width="90px" :rules="rules" ref="formRef">
                <el-form-item label="支付方式:">
                    <el-radio-group v-model="form.payWay">
                        <template v-for=" dict in dictDataMap['pay_way_dict']">
                            <el-radio v-if="dict.dictValue != '99'"
                                      :key="dict.dictValue"
                                      :border="true" :value="dict.dictValue">{{ dict.dictLabel }}
                            </el-radio>
                        </template>

                    </el-radio-group>
                </el-form-item>
                <el-form-item label="金额:" prop="amountOfMoney">
                    <el-input v-model="form.amountOfMoney" min="0" placeholder="请输入金额" type="number"/>
                </el-form-item>
                <el-form-item label="">
                    <el-button type="primary" @click="submitForm">缴费</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import {addPatPrepayment, listPatPrepayment, refundApplication} from "@/api/hospitalization/patPrepayment";
import {useDictStoreHook} from "@/store/modules/dict";
import {useUserStoreHook} from "@/store/modules/user";

const dictStore = useDictStoreHook();
let dictDataMap = ref(dictStore.isTypeGetData('pay_way_dict', 'medical_insurance_type', 'entry_and_exit_hospital_status', 'sys_user_sex',
    'pat_prepayment_type'
))
const useUserStore = useUserStoreHook();
// 登录用户信息
const userInfo = <UserInfoBusi>useUserStore.user.userInfo;
const formRef = ref()
const patPrepaymentList = ref<any>([])
const amountOfMoney = ref<number>(0.00)
const residueAmountOfMoney = ref<number>(0.00)
const diagnosis = ref<String>("")
const form = ref<any>({
    payWay: "1",
    type: "1"
})
const props = defineProps({
    visitId: {
        type: String,
        default: ""
    },
    patientInfo: <any>[{}],
})

const rules = ref<any>({
    amountOfMoney: [
        {
            required: true, message: "金额不能为空", trigger: "blur"
        }
    ]
})

watch(() => props.visitId, (nowValue, _oldValue) => {
    listPatPrepaymentFun(nowValue)
}, {deep: true, immediate: true})

function listPatPrepaymentFun(visitId: string) {
    listPatPrepayment({visitId: visitId}).then((res: resType) => {
        patPrepaymentList.value = res.data
        form.value.payWay = "1"
        form.value.type = "1"
        form.value.amountOfMoney = ""
        residueAmountOfMoney.value = 0
        amountOfMoney.value = 0
        let amountOfMoneyThis = 0
        patPrepaymentList.value.forEach(item => {
            item.currentBalance = 0.00
            if (item.type != '3') {
                amountOfMoneyThis += Number(item.amountOfMoney)
            }
        })
        amountOfMoney.value = Number(amountOfMoneyThis.toFixed(2))
    })
}

/** 提交按钮 */
function submitForm() {
    (formRef.value as any).validate(valid => {
        if (valid) {
            ElMessageBox.confirm('是否确认要缴费？',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            ).then(() => {
                form.value.visitId = props.patientInfo.visitId
                form.value.patientId = props.patientInfo.patientId
                form.value.orgId = userInfo.orgId
                addPatPrepayment(form.value).then(() => {
                    ElMessage.success("缴费成功");
                    listPatPrepaymentFun(props.patientInfo.visitId)
                }).finally(() => {
                });
            }).catch(() => {
            })
        }
    });
}

/**
 * 退费、作废
 */
function refundApplicationFun(row, type) {
    ElMessageBox.confirm(type === "2" ? "是否确认退费" : "是否确认作废",
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        refundApplication(row.prepaymentId, type, userInfo.userId).then(() => {
            listPatPrepaymentFun(props.patientInfo.visitId)
            ElMessage.success(type === "2" ? "退费成功" : "作废成功")
        })
    })
}

function printFun() {

}

</script>

<style scoped>
.patient-info-span {
    margin-bottom: 2px;
}

</style>
